<template>
  <SModal
    v-model:show="modalShow"
    :title="modalTitle" @positive-click="onSubmit"
    >
    <SForm
        ref="formRef"
        :model="formValue"
    >
      <n-gi :span="12">
        <SFormInput name="username" label="用户名" required v-model:value="formValue.username" @load-rules="loadRules"/>
      </n-gi>
      <n-gi :span="12">
        <SFormInput name="name" label="昵称" required v-model:value="formValue.name" @load-rules="loadRules"/>
      </n-gi>
      <n-gi :span="12">
        <SFormInput name="email" label="邮箱" required v-model:value="formValue.email" @load-rules="loadRules"/>
      </n-gi>
      <n-gi :span="12">
        <SFormInput name="phone" label="手机号" required v-model:value="formValue.phone" @load-rules="loadRules"/>
      </n-gi>
      <n-gi :span="12">
        <SFormNumber name="age" label="年龄" required v-model:value="formValue.age" @load-rules="loadRules"/>
      </n-gi>
    </SForm>
  </SModal>
</template>
<script setup>
import SModal from "@/components/public/SModal/SModal.vue";
import useSModal from "@/components/public/SModal/useSModal";
import SForm from "@/components/public/extForm/SForm.vue";
import SFormInput from "@/components/public/extForm/SFormInput.vue";
import SFormNumber from "@/components/public/extForm/SFormNumber.vue";
import {addUser} from "@/api/system/userApi";

const formDefValue = {

}
const api = {
  addApi:addUser
}
const {
  onAdd,
  loadRules,
  modalShow,
  modalLoading,
  modalTitle,onSubmit,
  formValue,
  formRef,
} = useSModal("用户",formDefValue,api);

defineExpose({
  onAdd,
  modalLoading
})
</script>